<template>
  <div>
    <div class="block">
      <el-carousel :interval="3000" width="350px" type="card" height="400px">
        <el-carousel-item v-for="item in images" :key="item">
          <img :src="item.url" alt=""  style="object-fit: none;height: 400px"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div>
      <h2>愿您有个良好得体验</h2>
    </div>

    <div>
      <p>入住选择</p>
      <el-divider></el-divider>
    </div>

    <!-- <div style="text-align: center" class="div-xuanze">
      <el-select
        v-model="value1"
        placeholder="请选择房型"
        style="margin-left: 20px"
      >
        <el-option
          v-for="item in roomtypelist"
          :key="item.id"
          :label="item.remark"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="value2"
        placeholder="请选择价格"
        style="margin-left: 20px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 20px">搜索</el-button>
    </div> -->
    <div class="div-card">
      <el-row :gutter="20">
        <el-col :span="16"
          ><div class="grid-content bg-purple">
            <el-row>
              <img src="../assets/shuangren.png" class="image" />
            </el-row></div
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content bg-purple">
            <h2>总统套房</h2>
            <p>符合你强大的身份！</p>
            <!--<el-button size="medium" round
              ><router-link to="/ruzhu">入住</router-link></el-button
            >-->
          </div></el-col
        >
      </el-row>
    </div>
    <div class="div-card2">
      <el-card
        class="el-card-style"
        v-for="(itme,index) in room1"
        :body-style="{ padding: '0px' }"
      >
        <img :src="images[index%4].url" class="image" />
        <div style="padding: 14px">
          <span>{{ itme.roomParams.remark }}</span>
          <div class="bottom clearfix">
            <el-button type="text" @click="ruzhu(itme)" class="button">入住</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Carousel",
  data() {
    return {
      roomtypelist: [],
      options: [],
      value1: "",
      value2: "",
      images: [
        { url: require("../assets/bj.jpg") },
        { url: require("../assets/jd.jpg") },
        { url: require("../assets/drj.png") },
        { url: require("../assets/srf.png") },
      ],
      room1: [],
    };
  },
  mounted() {
    console.log("调用了");
    this.findAll();
    this.roomtype();
  },
  methods: {
    async roomtype() {
      let reuslt = await this.$API.myapi.reqfindAllroomType();
      console.log(reuslt);
      if (reuslt.data.code == 20000) {
        this.roomtypelist = reuslt.data.data;
      }
    },
    ruzhu(id) {
      let location = { name: "Ruzhu", query: { id: id.id ,remark: id.roomParams.remark ,money: id.money ,context: id.context} };
 
      this.$router.push(location);
    },
    async findAll() {
      let request = await this.$API.myapi.reqfindAllTable();

      if (request.data.code == 20000) {
        this.room1 = request.data.data;
      }
    },
  },
};
</script>

<style scoped>
.el-card-style {
  width: 31%;
  height: 563px;
  margin: 20px 20px;
}
.div-card2 {
  /* margin: 3px 3px; */
  display: flex;
  flex-wrap: wrap;
}
.image {
  width: 100%;
  height: 480px;
  display: block;
}

.div-card {
  margin-top: 20px;
}
.div-xuanze {
  margin-left: 20px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.box-card {
  width: 60%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
